<template>
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="150px"
        class="demo-ruleForm"
    >
        <el-form-item
            label="所属单位"
            prop="depId"
            class="demo-ruleForm-item"
        >
            <el-select
                v-model="ruleForm.depId"
                placeholder="请选择"
                @change="depIdChange"
                :disabled="localTypeUnit != '1'"
            >
                <el-option
                    v-for="item in depIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item
            label="设备名称"
            prop="facilityName"
            class="demo-ruleForm-item"
        >
            <el-input
                v-model="ruleForm.facilityName"
                placeholder="请输入"
            />
        </el-form-item>
        <el-form-item
            label="设备分类"
            prop="facilitySort"
            class="demo-ruleForm-item"
        >
            <el-input
                v-model="ruleForm.facilitySort"
                placeholder="请输入"
            />
            <!-- <el-select v-model="ruleForm.facilitySort" placeholder="请选择">
        <el-option
          v-for="item in facilitySortList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select> -->
        </el-form-item>
        <el-form-item
            label="设备分级"
            prop="facilityLevel"
            class="demo-ruleForm-item"
        >
            <el-select
                v-model="ruleForm.facilityLevel"
                placeholder="请选择"
            >
                <el-option
                    v-for="item in facilityLevelList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item
            label="规格型号"
            prop="specificationModel"
            class="demo-ruleForm-item"
        >
            <el-input
                v-model="ruleForm.specificationModel"
                placeholder="请输入"
            />
        </el-form-item>
        <el-form-item
            label="设备唯一识别码"
            prop="facilityNumber"
            class="demo-ruleForm-item"
        >
            <el-input
                v-model="ruleForm.facilityNumber"
                placeholder="请输入"
            />
        </el-form-item>
        <el-form-item
            label="设备地点"
            prop="facilityLocations"
            class="demo-ruleForm-item"
        >
            <el-input
                v-model="ruleForm.facilityLocations"
                placeholder="请输入"
            />
        </el-form-item>
        <el-form-item
            label="资产编号"
            prop="assetNumber"
            class="demo-ruleForm-item"
        >
            <el-input
                v-model="ruleForm.assetNumber"
                placeholder="请输入"
            />
        </el-form-item>
        <el-form-item
            label="数量"
            prop="facilityNumbers"
            class="demo-ruleForm-item"
        >
            <el-input
                v-model="ruleForm.facilityNumbers"
                placeholder="请输入"
            />
        </el-form-item>
        <el-form-item
            label="单位"
            prop="unit"
            class="demo-ruleForm-item"
        >
            <el-input
                v-model="ruleForm.unit"
                placeholder="请输入"
            />
        </el-form-item>
        <el-form-item
            label="设备状态"
            prop="facilityState"
            class="demo-ruleForm-item"
        >
            <el-select
                v-model="ruleForm.facilityState"
                placeholder="请选择"
            >
                <el-option
                    v-for="item in facilityStateList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item
            label="供应商/厂家"
            prop="facilitySupplier"
            class="demo-ruleForm-item"
        >
            <el-input
                v-model="ruleForm.facilitySupplier"
                placeholder="请输入"
            />
        </el-form-item>
        <el-form-item
            label="是/否纳入特许经营权"
            prop="franchising"
            class="demo-ruleForm-item"
        >
            <el-select
                v-model="ruleForm.franchising"
                placeholder="请选择"
                style="width: 168px"
            >
                <el-option
                    label="是"
                    value="是"
                />
                <el-option
                    label="否"
                    value="否"
                />
            </el-select>
        </el-form-item>
        <el-form-item
            label="采购价格"
            prop="purchasePrice"
            class="demo-ruleForm-item"
        >
            <el-input
                v-model="ruleForm.purchasePrice"
                style="width: 168px"
                placeholder="请输入"
            />
        </el-form-item>
        <el-form-item
            label="采购时间"
            prop="purchaseTime"
            class="demo-ruleForm-item"
        >
            <el-date-picker
                v-model="ruleForm.purchaseTime"
                type="date"
                placeholder="请选择"
                clearable
                style="width: 168px"
            />
        </el-form-item>
        <el-form-item
            label="开始使用时间"
            prop="startTime"
            class="demo-ruleForm-item"
        >
            <el-date-picker
                v-model="ruleForm.startTime"
                type="date"
                placeholder="请选择"
                clearable
                style="width: 168px"
            />
        </el-form-item>
        <el-form-item
            label="保修期限"
            prop="guaranteeTime"
            class="demo-ruleForm-item"
        >
            <el-date-picker
                v-model="ruleForm.guaranteeTime"
                type="date"
                placeholder="请选择"
                clearable
                style="width: 168px"
            />
        </el-form-item>
        <el-form-item
            label="报废期限"
            prop="scrapTime"
            class="demo-ruleForm-item"
        >
            <el-date-picker
                v-model="ruleForm.scrapTime"
                type="date"
                placeholder="请选择"
                clearable
                style="width: 168px"
            />
        </el-form-item>

        <el-form-item
            label="是否联网"
            prop="networking"
            class="demo-ruleForm-item"
        >
            <el-select
                v-model="ruleForm.networking"
                placeholder="请选择"
                style="width: 168px"
            >
                <el-option
                    label="是"
                    value="是"
                />
                <el-option
                    label="否"
                    value="否"
                />
            </el-select>
        </el-form-item>
        <el-form-item
            label="设备标签"
            prop="tagIds"
            class="demo-ruleForm-item-long"
        >
            <el-select
                v-model="ruleForm.tagIds"
                placeholder="请选择"
                style="width: 168px"
                multiple
            >
                <el-option
                    v-for="item in batchlabelList"
                    :key="item.id"
                    :label="item.tagName"
                    :value="item.id"
                />
            </el-select>
        </el-form-item>
        <el-form-item
            label="主要技术参数"
            prop="technicalParameter"
            class="demo-ruleForm-item-long"
        >
            <el-input
                v-model="ruleForm.technicalParameter"
                placeholder="请输入"
                style="width: 368px; margin-right: 10px"
                autosize
                type="textarea"
            />
        </el-form-item>
        <el-form-item
            label="主要零部件及参数"
            prop="partsParameters"
            class="demo-ruleForm-item-long"
        >
            <el-input
                v-model="ruleForm.partsParameters"
                placeholder="请输入"
                style="width: 368px; margin-right: 10px"
            />
        </el-form-item>
        <el-form-item
            label="使用/安装说明书"
            prop="instructionManual"
            class="demo-ruleForm-item-long"
        >
            <el-input
                v-model="ruleForm.instructionManual"
                placeholder="请输入"
                style="width: 368px; margin-right: 10px"
            />
            <el-upload
                drag
                action="http://47.106.144.138:8081/facility/fileUpload"
                class="uploadStyle"
                :on-success="
                    (res) => {
                        return handleExcelImportSuccess(
                            res,
                            'instructionManualPath'
                        );
                    }
                "
                :limit="1"
                :before-remove="
                    (res) =>
                        handleExcelImportRemove(res, 'instructionManualPath')
                "
            >
                <div
                    class="el-upload__text"
                    style="height: 30px; padding: 0 !important"
                >
                    拖拽到这里 或者 <em>点击这里</em> 上传
                </div>
            </el-upload>
        </el-form-item>
        <el-form-item
            label="设备操作规程"
            prop="operatingProcedure"
            class="demo-ruleForm-item-long"
        >
            <el-input
                v-model="ruleForm.operatingProcedure"
                placeholder="请输入"
                style="width: 368px; margin-right: 10px"
            />
            <el-upload
                drag
                action="http://47.106.144.138:8081/facility/fileUpload"
                class="uploadStyle"
                :on-success="
                    (res) => {
                        return handleExcelImportSuccess(
                            res,
                            'operatingProcedurePath'
                        );
                    }
                "
                :limit="1"
                :before-remove="
                    (res) =>
                        handleExcelImportRemove(res, 'operatingProcedurePath')
                "
            >
                <div
                    class="el-upload__text"
                    style="height: 30px; padding: 0 !important"
                >
                    拖拽到这里 或者 <em>点击这里</em> 上传
                </div>
            </el-upload>
        </el-form-item>
        <el-form-item
            label="维修记录"
            prop="maintenanceRecord"
            class="demo-ruleForm-item-long"
        >
            <el-input
                v-model="ruleForm.maintenanceRecord"
                placeholder="请输入"
                style="width: 368px; margin-right: 10px"
            />
            <el-upload
                drag
                action="http://47.106.144.138:8081/facility/fileUpload"
                class="uploadStyle"
                :on-success="
                    (res) => {
                        return handleExcelImportSuccess(
                            res,
                            'maintenanceRecordPath'
                        );
                    }
                "
                :limit="1"
                :before-remove="
                    (res) =>
                        handleExcelImportRemove(res, 'maintenanceRecordPath')
                "
            >
                <div
                    class="el-upload__text"
                    style="height: 30px; padding: 0 !important"
                >
                    拖拽到这里 或者 <em>点击这里</em> 上传
                </div>
            </el-upload>
        </el-form-item>
        <el-form-item
            label="安装程序"
            prop="facilityInstaller"
            class="demo-ruleForm-item-long"
        >
            <el-input
                v-model="ruleForm.facilityInstaller"
                placeholder="请输入"
                style="width: 368px; margin-right: 10px"
            />
            <el-upload
                drag
                action="http://47.106.144.138:8081/facility/fileUpload"
                class="uploadStyle"
                :on-success="
                    (res) => {
                        return handleExcelImportSuccess(
                            res,
                            'facilityInstallerPath'
                        );
                    }
                "
                :limit="1"
                :before-remove="
                    (res) =>
                        handleExcelImportRemove(res, 'facilityInstallerPath')
                "
            >
                <div
                    class="el-upload__text"
                    style="height: 30px; padding: 0 !important"
                >
                    拖拽到这里 或者 <em>点击这里</em> 上传
                </div>
            </el-upload>
        </el-form-item>
        <el-form-item
            label="设备二维码"
            prop="twoDimensionalCode"
            class="demo-ruleForm-item-long"
        >
            <el-upload
                drag
                action="http://47.106.144.138:8081/facility/fileUpload"
                class="uploadStyle"
                :on-success="
                    (res) => {
                        return handleExcelImportSuccess(
                            res,
                            'twoDimensionalCode'
                        );
                    }
                "
                :limit="1"
                :before-remove="
                    (res) => handleExcelImportRemove(res, 'twoDimensionalCode')
                "
            >
                <div
                    class="el-upload__text"
                    style="height: 30px; padding: 0 !important"
                >
                    拖拽到这里 或者 <em>点击这里</em> 上传
                </div>
            </el-upload>
        </el-form-item>
        <el-form-item
            label="设备照片"
            prop="ficilityPhoto"
            class="demo-ruleForm-item-long"
        >
            <el-upload
                drag
                action="http://47.106.144.138:8081/facility/fileUpload"
                class="uploadStyle"
                :on-success="
                    (res) => {
                        return handleExcelImportSuccess(res, 'ficilityPhoto');
                    }
                "
                :limit="1"
                :before-remove="
                    (res) => handleExcelImportRemove(res, 'ficilityPhoto')
                "
            >
                <div
                    class="el-upload__text"
                    style="height: 30px; padding: 0 !important"
                >
                    拖拽到这里 或者 <em>点击这里</em> 上传
                </div>
            </el-upload>
        </el-form-item>
        <el-form-item
            label="设备合同"
            prop="ficilityContract"
            class="demo-ruleForm-item-long"
        >
            <el-upload
                drag
                action="http://47.106.144.138:8081/facility/fileUpload"
                class="uploadStyle"
                :on-success="
                    (res) => {
                        return handleExcelImportSuccess(
                            res,
                            'ficilityContract'
                        );
                    }
                "
                :limit="1"
                :before-remove="
                    (res) => handleExcelImportRemove(res, 'ficilityContract')
                "
            >
                <div
                    class="el-upload__text"
                    style="height: 30px; padding: 0 !important"
                >
                    拖拽到这里 或者 <em>点击这里</em> 上传
                </div>
            </el-upload>
        </el-form-item>
    </el-form>
</template>

<script setup>
import equipmentHttp from "@/https/equipment.js";
import labelHttp from "@/https/label.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { ElMessage } from "element-plus";
import moment from "moment";
import { onMounted, reactive, ref, watch } from "vue";
const emit = defineEmits(["closed"]);
let props = defineProps({
    currentEditInfo: {
        type: Object,
    },
});
let ruleForm = reactive({
    id: "",
    assetNumber: "",
    createTime: "",
    createUser: "",
    depId: "",
    facilityInstaller: "",
    facilityLevel: "",
    facilityLocations: "",
    facilityName: "",
    facilityNumbers: "",
    facilityNumber: "",
    facilitySerialNumber: "",
    facilitySort: "",
    facilityState: "",
    facilitySupplier: "",
    ficilityContract: "",
    ficilityPhoto: "",
    franchising: "",
    guaranteeDueDate: "",
    guaranteeTime: "",
    instructionManual: "",
    maintenanceRecord: "",
    networking: "",
    operatingProcedure: "",
    partsParameters: "",
    purchasePrice: "",
    purchaseTime: "",
    remark: "",
    scrapDueDate: "",
    scrapTime: 0,
    specificationModel: "",
    standby: "",
    startTime: "",
    tagIds: [],
    technicalParameter: "",
    twoDimensionalCode: "",
    unit: "",
    updateTime: "",
    updateUser: "",
});
const localTypeUnit = ref(Storage.localGet("depId"));
if (localTypeUnit.value == "1") {
    ruleForm.depId = "";
} else {
    ruleForm.depId = localTypeUnit.value;
}
const rules = ref({
    depId: [{ required: true, message: "请输入", trigger: "blur" }],
    facilityName: [
        {
            required: true,
            message: "请输入",
            trigger: "change",
        },
    ],
    facilitySort: [
        {
            required: true,
            message: "请输入",
            trigger: "change",
        },
    ],
    facilityLocations: [
        {
            required: true,
            message: "请输入",
            trigger: "change",
        },
    ],
});

const depIdList = ref([
    // { label: "公司", value: "1" },
    { label: "星沙厂", value: 2 },
    { label: "城西厂", value: 3 },
    { label: "城北厂", value: 4 },
    { label: "城南厂", value: 5 },
    { label: "城东厂", value: 6 },
]);
const facilityLevelList = ref([
    { label: "A", value: "A" },
    { label: "B", value: "B" },
    { label: "C", value: "C" },
    { label: "其他", value: "其他" },
]);
const facilityStateList = ref([
    { label: "在用", value: 1 },
    { label: "备用", value: 2 },
    { label: "维修", value: 3 },
    { label: "报废", value: 4 },
    { label: "其他", value: 5 },
]);
const facilitySortList = ref([]);
const depIdChange = () => {
    ruleForm.facilitySort = "";
    if (
        ruleForm.depId == "2" ||
        ruleForm.depId == "3" ||
        ruleForm.depId == "4" ||
        ruleForm.depId == "5"
    ) {
        getFacilitySort();
    }
    getBatchlabelList();
};

watch(
    () => ruleForm.depId,
    (newVal, oldVal) => {
        getBatchlabelList()
    }
)
const batchlabelList = ref([])
const getBatchlabelList = async () => {
    let params = {
        depId: ruleForm.depId,
        tagName: "",
        pageNo: 1,
        pageSize: 10000,
    }
    const res = await labelHttp.tagPageList(params);
    if (res.data.code === 200) {
        res.data.data.records.forEach(item => {
            item.id = item.id + ''
        })
        batchlabelList.value = res.data.data.records;
    }
}
onMounted(() => {
    if (
        ruleForm.depId == "2" ||
        ruleForm.depId == "3" ||
        ruleForm.depId == "4" ||
        ruleForm.depId == "5"
    ) {
        getFacilitySort();
    }
});
const getFacilitySort = () => {
    equipmentHttp.getFacilitySort(ruleForm.depId).then((res) => {
        facilitySortList.value = [];
        res.data.data.forEach((item) => {
            facilitySortList.value.push({
                label: item,
                value: item,
            });
        });
    });
};
const ruleFormRef = ref();
const editSubmit = () => {
    console.log(1);
    if (!ruleFormRef) return;
    ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            ruleForm.guaranteeTime = ruleForm.guaranteeTime
                ? moment(ruleForm.guaranteeTime).format("YYYY-MM-DD")
                : "";
            ruleForm.scrapTime = ruleForm.scrapTime
                ? moment(ruleForm.scrapTime).format("YYYY-MM-DD")
                : "";
            ruleForm.startTime = ruleForm.startTime
                ? moment(ruleForm.startTime).format("YYYY-MM-DD")
                : "";
            ruleForm.purchaseTime = ruleForm.purchaseTime
                ? moment(ruleForm.purchaseTime).format("YYYY-MM-DD")
                : "";
            ruleForm.tagIds = ruleForm.tagIds && ruleForm.tagIds.length > 0 ? ruleForm.tagIds.join(',') : '';
            equipmentHttp.updateFacility(ruleForm).then((res) => {
                if (res.data.code == 200) {
                    console.log(res.data);
                    ElMessage({
                        message: "修改成功",
                        type: "success",
                    });
                    emit("closed");
                } else {
                    ElMessage({
                        message: res.data.msg,
                        type: "error",
                    });
                }
            });
        } else {
            console.log("error submit!", fields);
        }
    });
};
const handleExcelImportSuccess = (res, type) => {
    ruleForm[type] = res.data;
    console.log("1111112222333332222", ruleForm[type]);
};
const handleExcelImportRemove = (res, type) => {
    ruleForm[type] = "";
};

watch(
    () => props.currentEditInfo,
    (newVal, oldVal) => {
        console.log(newVal, ruleForm);
        for (let key in ruleForm) {
            if (key == 'tagIds') {
                console.log(newVal[key], 'newVal[key]')
            }
            ruleForm[key] = newVal[key];
        }
    }
);
defineExpose({
    editSubmit,
});
</script>

<style scoped lang="less">
.demo-ruleForm {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .demo-ruleForm-item {
        flex: 33%;
    }
    .demo-ruleForm-item-long {
        flex: 100%;
    }
}
.uploadStyle {
    height: 30px;
    padding: 0 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
}
/deep/.el-upload-dragger {
    padding: 0 10px !important;
}
/deep/.el-upload-list__item-file-name {
    width: 175px !important;
}
</style>
